import React, { Component } from 'react'
import { Layout, Button, message, Modal, Menu, Dropdown, Icon } from 'antd';
import { Route, Switch, Redirect } from 'react-router-dom'

import LeftNav from '../../components/left-nav'
import Home from '../Home/Home'
import File from '../File/File'
import SiteMonitor from '../SiteMonitor/SiteMonitor'
import Resume from '../Resume/Resume'
import UserList from '../User/UserList/UserList'
import Repassword from '../User/Repassword/Repassword'
import './admin.less'
import memory from '../../utils/memory'
import storage from '../../utils/storage'
import { reqLogout } from '../../api'

const { Header, Sider, Content } = Layout;
const { confirm } = Modal

export default class Admin extends Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        this.setState({ collapsed });
    };
    logout = () => {
        let that = this
        confirm({
            title: '提示?',
            content: '确定要退出吗?',
            onOk() {
                reqLogout().then(res => {
                    if (res.code === 0) {
                        message.success('退出登录成功')
                        memory.user = {}
                        storage.user.remove()
                        that.props.history.replace('/login')
                    }
                })
            },
            onCancel() {
            },
        });

    }

    render() {
        const user = memory.user
        if (!user || !user.token) {
            return <Redirect to="/login" />
        }

        const menu = (
            <Menu>
                <Menu.Item key="0">
                    <span>{user.username}</span>
                </Menu.Item>
                <Menu.Item key="1">
                    <span>{user.phone}</span>
                </Menu.Item>
                <Menu.Item key="2">
                    <span>{user.role === 1 ? '管理员' : '普通用户'}</span>
                </Menu.Item>
            </Menu>
        );
        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                    <LeftNav collapsed={this.state.collapsed} />
                </Sider>
                <Layout>
                    <Header className="admin-header">
                        <div className="admin-header-user">
                            <Dropdown overlay={menu}>
                                <Button type="link" className="admin-header-user-btn">
                                    你好，{user.username}<Icon type="down" />
                                </Button>
                            </Dropdown>
                        </div>
                        <div className="admin-header-logout">
                            <Button type="link" onClick={this.logout}>退出</Button>
                        </div>
                    </Header>
                    <Content>
                        <Switch>
                            <Route path='/home' component={Home} />
                            <Route path='/file' component={File} />
                            <Route path='/siteMonitor' component={SiteMonitor} />
                            <Route path='/resume' component={Resume} />
                            <Route path='/user/userlist' component={UserList} />
                            <Route path='/user/repassword' component={Repassword} />
                            <Redirect to="/home" />
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}
